<template>
	<view class="container">
		<view class="header">
			<headerNavbarVue title='背包装备'></headerNavbarVue>
			<view class="tab-buttons">
				<view v-for="(item,index) in Ranking" class="tab-button" @click="selectRanking()">
					{{item}}
				</view>
			</view>
			</view>
			<view class="category-box">
				<view class="category-card">
					<minProductCardWVue></minProductCardWVue>
				</view>
			</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import headerNavbarVue from '@/components/headerNavbar.vue';
	import minProductCardWVue from '@/components/minProductCardW.vue';
	const Ranking = ref(['综合', '销量', '价格'])
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;

		.header {
			width: 100%;
			position: sticky;
			top: 0;
			.tab-buttons {
				display: flex;
				gap: 10px;
				justify-content: space-around;
				padding: 0 20rpx;
				box-sizing: border-box;
				transition: transform 0.3s ease; // 平滑过渡
background-color: #fff;
				.tab-button {
					font-size: 34rpx;
					font-weight: 400;
					color: rgba(203, 203, 203, 1);
					padding: 8px 16px;
					transition: background-color 0.3s, color 0.3s;
				}

				.active {
					font-size: 36rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
					border-bottom: 10rpx solid rgba(56, 56, 56, 1);
				}
			}
		}

	}
</style>